/*
 * @Author: yangshangchao
 * @Date: 2025-01-23 17:49:39
 * @LastEditors: yangshangchao
 * @Description: 头部注释
 */
// 目标:用户快速输入时，延后渲染列表 【即不用每个关键字都进行搜索，等用户快速输入完关键字再进行调接口渲染列表--防抖效果】。从而提高性能优化和体验。
// const deferredValue = useDeferredValue(keyword);
// keyword 实时改变的值
// deferredValue  可以延迟得到更新值

import { useState, useDeferredValue } from 'react';
import { Input, List, Flex } from 'antd';
import mockjs from 'mockjs';

interface Item {
  no: number;
  address: string;
  id: number;
}
const App = () => {
  const [keyword, setKeyword] = useState('');
  const [list, setList] = useState<Item[]>(() => {
    return mockjs.mock({
      'list|10000': [
        {
          'id|+1': 1,
          no: '@natural',
          address: '@county(true)',
        },
      ],
    }).list;
  });
  const deferredValue = useDeferredValue(keyword);
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setKeyword(val);
  };
  const findItem = () => {
    console.log(deferredValue + '------' + keyword); // list数据足够大才看得出区别
    // 过滤列表，仅在 deferredQuery 更新时触发
      return list.filter((item) => item.no.toString().includes(deferredValue));
  };
  const isStale = deferredValue !== keyword;

  return (
    <>
      <div>
        <h3>7-4.使用useDeferredValue</h3>
        <span>常作为体验优化使用，延迟更新 UI 的某些部分</span>
        <div>和useTransition的区别</div>
        <ul>
          <li>共同点：都是把任务优先级调低，延迟渲染</li>
          <li>
            useTransition主要关注点是状态的过渡。场景常用：list/tab的render。还提供了过渡标识，让开发者能够添加过渡反馈。
          </li>
          <li>useDeferredValue主要关注点是是单个值的延迟更新。场景常用：用户输入等频繁操作。</li>
        </ul>
        <div>
          <Flex>
            <Input value={keyword} placeholder="Basic usage" onChange={handleInputChange} />
          </Flex>

          <List
            style={{ opacity: isStale ? '0.5' : '1', transition: 'all 1s' }}
            dataSource={findItem()}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta title={`No.${item.no}`} description={item.address} />
              </List.Item>
            )}
          ></List>
        </div>
      </div>
    </>
  );
};

export default App;
